<!--
 * @message: 菜单组件
-->
<template>
  <div>
    <dt class="menuTitle">
      <Divider orientation="left">
        <Checkbox :disabled="type === 3 || isPermissions" :label="menu.menuCode" :value="menu.menuCode" @click.native="handleCheckMenu"><span v-if="menu.siteCode!=null && menu.siteCode!='' ">【{{menu.siteCode}}】</span>{{menu.menuName}}</Checkbox>
      </Divider>
    </dt>
    <CheckboxGroup
      v-model="permissionMap[menu.menuCode]"
      v-if="menu.permissions!=null && menu.permissions.length>0"
       class="permissionGroup">
      <Checkbox v-for="(per, index) in menu.permissions.split(',')" :label="per" :key="'two' + index" :disabled="type === 3"></Checkbox>
    </CheckboxGroup>
    <dd v-for="(menuItem, index) in menu.children" class="menuChildren" :key="'three' + index">
      <TemplatePermission :menu="menuItem" :permissionMap="permissionMap" :type="type"/>
    </dd>
  </div>
</template>

<script>
export default {
  name: 'TemplatePermission',
  props: {
    menu: {
      menuCode: '',
      menuName: '',
      permissions: '',
      children: []
    },
    type: {
      type: [Number, String],
      default: () => {
        return 1
      }
    },
    permissionMap: {}
  },
  data () {
    return {
      isPermissions: false
    }
  },
  methods: {
    handleCheckMenu (event) {
      if (event.target.checked) {
        // 没有菜单权限
        if (this.menu.permissions == null) {
          this.isPermissions = true
        } else {
          this.permissionMap[this.menu.menuCode] = this.menu.permissions.split(',')
        }
      } else {
        this.permissionMap[this.menu.menuCode] = []
      }
    }
  },
  components: {
    TemplatePermission: () => import('./TemplatePermission')
  }
}
</script>

<style scoped>
  .menuTitle {
    font-weight: bold;
  }

  .menuChildren {
    margin-left: 20px;
  }

  .permissionGroup {
    margin-left: 10%;
  }
</style>
